                                            <!-- 信息提醒组件 -->

<template>
    <!-- 外部框 -->
    <div class="msgReminder" :style="{ backgroundImage: 'url(' + msgReminderImg + ')' }" @click="msgReminderBtn">
        <!-- 红点信息 -->
        <div
            class="msgReminder-redNumber"
            v-if="msgRedNumber != 0"
            v-text="msgRedNumber > 99 ? '99+' : msgRedNumber"
            :class="msgRedNumber > 99 ? 'ninenine' : msgRedNumber >= 10 && msgRedNumber <= 99 ? 'ten' : ''"
        ></div>
    </div>
</template>

<script>
export default {
    props: {
        // 背景图标地址
        msgReminderImg: {
            type: [String],
            default: ''
        },
        // 红点数量
        msgRedNumber: {
            type: [String, Number],
            default: 0
        }
    },
    data() {
        return {};
    },
    methods: {
        // 点击函数
        // 传递红点显示数量
        msgReminderBtn() {
            this.$emit('msgReminderBtn', this.msgRedNumber);
        }
    }
};
</script>

<style>
/* 信息提醒组件 */
.msgReminder {
    width: 24px;
    height: 24px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

/* 红点信息 */
.msgReminder-redNumber {
    height: 17px;
    height: 18px;
    background: #fe4004;
    border-radius: 9px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: center;
    color: #ffffff;
    line-height: 18px;
    padding: 0 4px;
    position: absolute;
    top: -10px;
    right: -42%;
}

/* 大于99时的样式 */
.ninenine {
    right: -120%;
}

/* 两位数时 */
.ten {
    right: -80%;
}
</style>
